<template>
  <jl-base v-if="show">

    <jl-header>
      <mt-header title="新增要货单" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content style="height: calc(100% - 133px);!important;">
      <mt-navbar v-model="selected" class="mb10">
        <mt-tab-item id="base">基本信息</mt-tab-item>
        <mt-tab-item id="goods">商品信息</mt-tab-item>
      </mt-navbar>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="base">
          <div class="dld_body">
            <jl-from-input required label="经销商" v-model="formData.JXSMC"/>

            <jl-from-query type="function"
                           label="业务员"
                           required
                           :function="callbackYwy"
                           @ok="chooseYwy"
                           :text="formData.YWYMC"
                           v-if="isShow">
              <div class='jl_form'>
                <div class='jl_form_item bor_bottom'>
                    <span class='w04 '>
                      {RYMC}
                    </span>
                  <span class='w08 tr'>
                      {BMMC}
                    </span>
                  <span class='w04 font_size_small'>
                      {RYZTMC}
                    </span>
                  <span class='w08 font_size_small tr'>
                      {GSMC}
                    </span>
                  <i class='fa fa-angle-right'></i>
                </div>
              </div>
            </jl-from-query>

            <jl-from-button label="销售方式" :text="formData.XSFS['VALUE']" required @click="chooseXSFS"/>
            <jl-from-select label="配送方式" :options="{'0': '自提', '1': '配送'}" default-key="1" v-model="formData.PSFS"/>
          </div>

          <div class="dld_title">
            <span>配送列表</span>
          </div>
          <div class="dld_body">
            <jl-from-input label="联系人" v-model="formData.LXR"></jl-from-input>
            <jl-from-input label="联系方式" v-model="formData.LXFS"></jl-from-input>
            <jl-address label="送货地址" required v-model="formData.SHDZ"/>
            <jl-from-datepicker label="送货时间" required
                                v-model="formData.PSHRQ "/>
            <jl-from-button label="承运方" :text="formData.CYF['VALUE']" @click="chooseCYF"></jl-from-button>
          </div>

          <div class="dld_title">
            <span>余额列表</span>
          </div>
          <div class="dld_body">
            <jl-from-input label="可用余额" disabled v-model="formData.KYYE"></jl-from-input>
            <jl-from-input label="可用返利" disabled v-model="formData.FLYE"></jl-from-input>
            <jl-from-input label="返利比例" disabled v-model="formData.FLBL"></jl-from-input>
            <jl-from-input label="可用赠品数量" disabled v-model="formData.ZPYE"></jl-from-input>
          </div>


        </mt-tab-container-item>

        <mt-tab-container-item id="goods">
          <div>
            <template v-for="(item,index) in formData.SPLB">
              <div class="w12">
                <div class="dld_title"><span>商品信息({{index+1}})</span>
                  <i class="fa fa-trash font_color font_size_large fr" @click="removeGoods(index)"></i>
                </div>
                <div class="dld_body">
                  <div class="jl_form">
                    <div class="jl_form_item bor_bottom">
                      <span class="w04">商品名称</span>
                      <span class="w08 tr">{{item['SPMC']}}</span>
                    </div>
                  </div>

                  <jl-from-input label="要货单价" disabled
                                 :value="item.YHDJ |money" color="black"></jl-from-input>

                  <jl-from-input color="black" label=" 要货金额" disabled :value="item.YHJE|money"></jl-from-input>

                  <div class=" jl_input">
                    <div class="jl_input_item pr10 bor_bottom">
                      <span class="w08">
                        <em class="font_red">*</em>要货数量
                      </span>
                      <nut-stepper
                        :value.sync="item.YHSL"
                        :min="1"
                        @change="eventSum(item)"
                      ></nut-stepper>
                    </div>
                  </div>
                  <jl-from-textarea placeholder="备注" v-model="item.BZ"/>
                </div>
              </div>
            </template>
            <div class="dld_add mt10" @click="SPLB_SHOW = true">+ 添加商品</div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>

      <!--销售方式-->
      <jl-picker
        :is-visible="XSFS_SHOW"
        :list-data="[XSFS_LIST]"
        :item-key="'VALUE'"
        @confirm="callbackXSFS"
        @close="XSFS_SHOW = false"
      ></jl-picker>

      <!--承运方-->
      <jl-picker
        :is-visible="CYF_SHOW"
        :list-data="[CYF_LIST]"
        :item-key="'VALUE'"
        @confirm="callbackCYF"
        @close="CYF_SHOW = false"
      ></jl-picker>

      <!--   选择商品   -->
      <mt-popup style="height: 100%;width: 100%"
                v-model="SPLB_SHOW"
                position="right">
        <goods @close="SPLB_SHOW = false"
               @save="callGoods"
               :params="formData"/>
      </mt-popup>
    </jl-content>

    <jl-footer>
      <div class="dld_title font_red" style="background-color: #f1f1f1;">
        <span>合计：{{formData.SPLB.length}}件商品。</span>
      </div>
      <div class="footer_btn">
        <button class="none" @click="draft">保存草稿</button>
        <button @click="newSave">提交</button>
      </div>
    </jl-footer>

  </jl-base>
</template>

<script>
  import Goods from './CustomerNeedGoods'

  export default {
    components: {Goods},
    name: 'CustomerNeedNew',
    methods: {
      back() {
        this.$router.back()
      }
    },
    data() {
      return {
        show: true,
        XSFS_SHOW: false,
        isShow: false,
        selected: 'base',
        XSFS_LIST: [],
        SPLB_SHOW: false,
        CYF_SHOW: false,
        CYF_LIST: [],
        formData: {
          jlbh: 0,
          PSFS: {},
          PSSJ: '',
          KHDH: '',
          SPLB: [],
          SHDZ: [],
          JLBH: 0,
          JXSMC: '',
          JXS01: '',
          WLDW01: '',
          XSFS: {},
          YWYMC: '',
          PSHRQ: '',
          CYF: {},
          YWY_RYXX01: '',
          LXR: '',
          LXFS: '',
          KYYE: '',
          FLYE: '',
          FLBL: '',
          ZPYE: '',
          PSSHDZ: [],
          isDraft: false,
        }
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      callbackJxs() {
        let userInfo = $Utils.getUserInfo();
        this.$engineer.searchCustomerNeedJxs({CZY01: userInfo['PCRM_CZY02']})
          .then(v => {
            delete v[0]['SHDZ'];
            Object.assign(this.formData, v[0])
            this.chooseJxs(v[0]);
          })
      },
      chooseJxs(item) {
        delete item['YWYMC'];
        delete item['SHDZ'];
        this.formData = {...this.formData, ...item};
        this.formData.LXFS = item['LXDH'];
        this.$engineer.searchJxsmx({BM01: item['BM01'], WLDW01: item['JXS01']})
          .then(v => {
            v[0]['FLYE'] = v[0]['FANLI_YE'];
            v[0]['FLBL'] = v[0]['FLSYBL'];
            v[0]['ZPYE'] = v[0]['ZPKYSL'];
            this.formData = {...this.formData, ...v[0]}
          })
        this.isShow = true
      },
      callbackYwy() {
        return this.http.post('/api/queryRYXX/queryRYXX.do', {
          XmlData: {
            WLDW01: this.formData.WLDW01
          }
        })
      },
      chooseYwy(item) {
        item['YWYMC'] = item['RYMC'];
        this.formData = {...this.formData, ...item};
      },
      chooseXSFS() {
        if ($Utils.isNull(this.formData.JXS01)) {
          $Utils.toast({
            message: '请选择经销商',
            duration: 4000,
            position: 'top'
          });
          this.XSFS_SHOW = false;
          return;
        }
        this.$engineer.searchCustomerNeedXsfs({
          'RYQX': this.formData.YWY_RYXX01,
          'XSLX_F': '1,3'
        })
          .then(v => {
            v = [...[{VALUE: '请选择'}], ...v]
            this.XSFS_LIST = v
            this.XSFS_SHOW = true
          })
      },
      callbackXSFS(item) {
        this.formData.XSFS = {...this.formData.XSFS, ...item[0]}
      },
      removeGoods(index) {
        this.formData.SPLB.splice(index, 1)
      },
      callGoods(list) {
        this.formData.SPLB = list
      },
      chooseCYF() {
        this.$engineer.searchCustomerNeedCyf()
          .then(v => {
            v = [...[{VALUE: '请选择'}], ...v]
            this.CYF_LIST = v
            this.CYF_SHOW = true
          })
      },
      callbackCYF(item) {
        this.formData.CYF = {...this.formData.CYF, ...item[0]}
      },
      save() {
        $Utils.MessageBox.confirm('确定执行此操作?').then(action => {
          $Utils.loading()
          this.$engineer.customerNeedSave(this.formData)
            .then(v => {
              $Utils.hideloading();
              this.back()
            })
            .catch(e => $Utils.hideloading())
        })
      },
      eventSum(item) {
        item.YHJE = item['YHSL'] * item['YHDJ'];
        this.$forceUpdate();
      },
      draft() {
        this.formData.isDraft = true;
        this.save();
      },
      newSave() {
        this.formData.isDraft = false;
        this.save();
      },
      initData() {
        this.http.find("SCM_KHYHD", {
          bdbh: this.formData.bdbh,
          jlbh: this.formData.jlbh,
        })
          .then(v => {
            Object.assign(this.formData, v[0]);
            this.show = true
          })
      }
    },
    watch: {
      'formData.SHDZ': function (n) {
        this.formData.PSSHDZ = n
      },
      'formData.LXR':function (n) {
        this.formData.PSLXR_CX = n
        this.formData.PSLXR = n
      }
    },
    created() {
      if (!$Utils.isNull(this.$route.params)) {
        this.show = false;
        this.formData.jlbh = this.$route.params.jlbh;
        this.formData.bdbh = this.$route.params.bdbh;
        this.initData();
      } else {
        this.callbackJxs();
      }
    }
  }
</script>

<style scoped>

</style>
